@use "../../assets/scss/mixins/base" as *;

// lines
$number-of-lines: 12; // up to 12 for now
$line-rotataion-deg: calc(180deg / $number-of-lines);
// circles
$circle-radius: 10px;
$circle-diameter: 2 * $circle-radius;
// animation
$duration: 4000ms;
$animation-half-time: 2;
$delay: calc($duration / $animation-half-time / $number-of-lines);

@keyframes ride-line {
  0% {
    top: 0;
  }
  50% {
    top: calc(100%);
    margin-top: -$circle-diameter;
  }
  100% {
    top: 0;
  }
}

// @mixin animate($delay) {
//   animation-name: ride-line;
//   animation-duration: $duration;
//   animation-timing-function: ease-in-out;
//   animation-delay: $delay;
//   animation-iteration-count: infinite;
// }
.wrapper {
  position: relative;
  margin: 0 auto;
  @include circle(400px, red);
  .line {
    position: absolute;
    @include rect(2px, 100%, white);
    left: calc(50% - 1px);
    .circle {
      position: absolute;
      @include circle($circle-diameter, blue);
      left: 50%;
      margin-left: -$circle-radius;
      animation: ride-line $duration ease-in-out infinite;
    }
  }

  @for $i from 1 through $number-of-lines {
    .line-#{$i} {
      transform: rotate(calc(($i - 1) * $line-rotataion-deg));
      .circle-#{$i} {
        animation-delay: $delay * $i;
      }
    }
  }
}
